<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<title>注册页面</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="${ctx}/js/md5.js"></script>
<script type="text/javascript" src="${ctx}/script/jquery-1.11.0.js"></script>
<link rel="stylesheet" href="${ctx}/script/css/bootstrap-theme.css">
<link rel="stylesheet" href="${ctx}/script/css/bootstrap.css">
<link rel="stylesheet" href="${ctx }/script/style.css" />
<script type="text/javascript" src="${ctx}/script/js/bootstrap.js"></script>
<script src="${ctx}/js/md5.js"></script>


<style type="text/css">
.error {
	color: red
}

.success {
	color: green
}

.form-control {
	margin-bottom: 3px;
}

input[type="button"] {
	margin-bottom: 3px;
}
</style>
</head>
<body lang="zh-cn" style="background-color: #eeeeee">
	<div class="wrapper">
		<div class="navbar navbar-default" role="navigation">
			<div class="container-fluid" style="background-color:#438EB8">
				<div class="navbar-header">
					<div class="navbar-brand" style="font-size:20px;color:#ffffff;">用户注册平台</div>
				</div>
			</div>
			<!-- /.container-fluid -->
		</div>
		<div class="container" style="width:100%;height:80%;">
			<div class="row" style="margin:5% auto;" align="center">
				<input type="radio" value="手机注册" name="registe" id="registe1"
					checked="checked" onclick="check()"><label for="registe1">手机注册 </label>
				<input type="radio" value="邮箱注册" name="registe" id="registe2"
					onclick="check()"><label for="registe2">邮箱注册</label>
				<form name="add" method="post" id="form1"
					action="ucenterRegiste!ucenterRegiste1">
					<table border="0">
						<tr>
							<td colspan="2"><input type="text" id="one"
								class="form-control" name="mobile"
								onblur="verifyRegister()" onfocus="txtFocus1(this)" value="手机号码" style="color: #666666"/>
								<div id="one" align="left"></div></td>
						</tr>
						<tr>

							<td><input type="text" id="two" maxlength="6"
								class="form-control" style="width: 220px; margin-right:5px;color: #666666" value="验证码" onfocus="txtFocus2(this)" />

							</td>
							<td><input type="button" class="btn btn-success"
								id="getRandCode" value="获取验证码"></td>
						</tr>
						<tr>
							<td><div id="two" align="left"></div>
							</td>
						</tr>
						<tr>
							<td colspan="2"><input type="text" id="three1"
								class="form-control" name="password" onfocus="txtFocus3(this)" onblur="txtBlur3(this)" value="密码" style="color: #666666" />
								<div id="three1" align="left"></div>
							</td>
						</tr>
						<tr>
							<td colspan="2"><input type="text" id="three2"
								class="form-control" onblur="checkthree2()" onfocus="txtFocus4(this)" value="确认密码" style="color: #666666" />
								<div id="three2" align="left"></div>
							</td>
						</tr>
						<tr style="visibility: hidden;">
							<td colspan="2">
								<div align="center">
									<input type="radio" value="2" name="type" checked="checked">企业
									&nbsp; <input type="radio" value="1" name="type">个人
								</div></td>
							<td></td>

						</tr>
						<tr>
							<td colspan="2"><div align="center">
									<input type="button" class="btn btn-lg btn-primary btn-block"
										id="but" value="免费注册" onclick="submit1()" />
								</div>
							</td>
						</tr>
						<tr>
          					<td colspan="2">
            					<div align="center" style="font-size:12px;color:#438EB9">点击注册，表示你已阅读并同意
          							<a href="${ctx}/add_article.jsp" target="_blank">
          								<font color="#438EB9">《MICRM服务条款》</font>
          							</a>
          						</div>
          					</td>
        				</tr>
						<tr>
							<td colspan="2">
								<div align="center">
									<br>
									<a class="btn btn-lg btn-success btn-block"
										href="${ctx }/member!initLogin">返回登录</a>
								</div>
							</td>
						</tr>
					</table>

				</form>
				<form action="ucenterRegiste!sendMail" id="form2" name="form2"
					style="display:none;">
					<table>
						<tr>
							<td colspan="2"><input type="text" id="fover"
								class="form-control" onblur="checkEmail()"
								name="email" value="邮箱" style="color: #666666" onfocus="txtFocus5(this)" />
								<div id="fover" align="left"></div>
							</td>
						</tr>
						<tr>
							<td colspan="2"><input type="text" id="five1"
								class="form-control" name="password" value="密码" style="color: #666666" onfocus="txtFocus6(this)" onblur="txtBlur6(this)" />
								<div id="five1" align="left"></div>
							</td>
						</tr>
						<tr>
							<td colspan="2"><input type="text" id="five2"
								class="form-control" value="确认密码" onblur="checkfive2()" style="color: #666666" onfocus="txtFocus7(this)" />
								<div id="five2" align="left"></div>
							</td>
						</tr>
						<tr>
							<td><input type="text" id="six" maxlength="6"
								class="form-control" value="验证码" style="width: 220px; color: #666666" onfocus="txtFocus8(this)" />
							</td>
							<td><img src="maccount!validateCode" id="img"
								style="margin-left:5px;height:30px;width:80px"
								onclick="javascript:refresh(this);" />
							</td>
						</tr>
						<tr style="visibility: hidden;">
							<td colspan="2">
								<div align="center">
									<input type="radio" value="2" name="type" checked="checked">企业
									&nbsp; <input type="radio" value="1" name="type">个人
								</div></td>
						</tr>
						<tr>
							<td colspan="2"><div align="center">
									<input type="button" class="btn btn-lg btn-primary btn-block"
										id="but" style="width: 320px;" value="免费注册"
										onclick="submit2()" />
								</div>
							</td>
						</tr>
						<tr>
          					<td colspan="2">
            					<div align="center" style="font-size:12px;color:#438EB9">点击注册，表示你已阅读并同意
          							<a href="${ctx}/add_article.jsp" target="_blank">
          								<font color="#438EB9">《MICRM服务条款》</font>
          							</a>
          						</div>
          					</td>
        				</tr>
						<tr>
							<td colspan="2">
								<div align="center">
									<br>
									<a class="btn btn-lg btn-success btn-block"
										href="${ctx }/member!initLogin">返回登录</a>
								</div>
							</div></td>
						</tr>
					</table>
				</form>
			</div>
		</div>
		<div class="push"></div>
	</div>
	<c:import url="/collect/down.jsp"></c:import>
	<script type="text/javascript">
		var checkMobile=true;
		var checkMail=true;
		var checkPassword1=true;
		var checkPassword2=true;
		var checkMobileCode=false;
		var checkCode=false;
		$(document).ready(function() {
			// 发送获取验证码的请求
			$("input[id='getRandCode']").click(function() {
				var mobile = document.getElementById("one").value;
				$.ajax({
						sync : false,
						url : "maccount!sendSms",
						type : "post",
						data : {
								"mobile" : mobile
								},
						datatype : "json",
						success : function(data) {

						var map = eval("("+ data+ ")");
						if (map == null) {$("div[id='two']").html("<font color='red'>验证码发送失败，请稍后重新获取验证码！</font>");
											} else {
												if (map.temp == '提交成功') {
												var m = 60; // 获取验证码的时间间隔
												$("#getRandCode").val(m+ "秒钟后可再次使用");
												$("div[id='two']").html("<font color='red'>验证码已发送，请注意查收！</font>");
												$("#getRandCode").attr('disabled',true);
												$("#getRandCode").removeClass("btn-success").addClass("btn-danger");
												$("input[id='seven']").width(140);
												var w = setInterval(function() {
												$("#getRandCode").val(m+ "秒钟后可再次使用");
															m--;
												if (m == 0) {
													clearInterval(w);
													$("#getRandCode").removeClass("btn-danger").addClass("btn-success");
													$("#getRandCode").val("获取验证码");
													$("#getRandCode").attr('disabled',false);
													$("div[id='two']").html("");
													$("input[id='two']").width(194);
															}
																	},1000);
																	} else if (map.temp == '未通过') {
																		$("div[id='two']").html("<font color='red'>每日获取验证码的次数为5次，您今日已达上限！</font>");
																	} else {
																		$("div[id='two']").html("<font color='red'>"+ map.temp+ "</font>");
																	}
																}
															},
															error : function(
																	request) {
																$("#getRandCode").attr('disabled',false);
																registeCheck1 = false;
																alert("对不起，发生错误！");
															}
														});
											});
							// 判断验证码
							$("input[id='two']").blur(function() {
									var seven = $(this).val();
									if (seven.length == 0) {
										$("div[id='two']").html("<font color='red'>请输入验证码</font>");
											$("input[id='two']").val("验证码");
											$("input[id='two']").css("color","#666666");
												registeCheck1 = false;
													return false;
												}
												var three = $("input[id='one']")
														.val();
												if (three.length == 0) {
													$("div[id='two']")
															.html(
																	"<font color='red'>请输入手机号</font>");
													checkMobileCode=false;
													return false;
												}
												$.ajax({
															url : "maccount!verifyMobileCode",
															type : "post",
															data : {
																"userMobileCode" : seven,
																"mobile" : three
															},
															datatype : "json",
															success : function(data) {
																registeCheck1 = false;
																var map = eval("("+ data+ ")");
																if (map == null) {
																	$("div[id='two']").html("<font color='red'>验证码错误！</font>");
																} else {
																	if (map.temp == '验证码正确') {
																		checkMobileCode=true;
																		$("div[id='two']").html("<font color='green'>"+ map.temp+ "</font>");
																	} else {
																		checkMobileCode=false;
																		$("div[id='two']").html("<font color='red'>"+ map.temp+ "</font>");
																	}
																}
															},
															error : function(
																	request) {
																registeCheck1 = false;
																alert("对不起，发生错误！");
															}
														});
											});

						});

		// 聚焦手机框
		function txtFocus1(e) {
			if (e.value == '手机号码') {
				e.value = e.value.replace("手机号码", "");
				e.style.color = "";
			}
			$("div[id='one']").html("");
		}
		
		// 聚焦验证码框
		function txtFocus2(e) {
			if (e.value == '验证码') {
				e.value = e.value.replace("验证码", "");
				e.style.color = "";
			}
			$("div[id='two']").html("");
		}
		
		//手机号验证
		function verifyRegister() {
			var mobile = document.getElementById("one").value;
			mobileReg = /^1[3|4|5|8][0-9]\d{8}$/;
			if (mobile.length == 0) {
				$("div[id='one']").html("<font color='red'>请输入手机号</font>");
				$("input[id='one']").val("手机号码");
				$("input[id='one']").css("color","#666666");
				checkMobile=false;
			} else if (!mobileReg.test(mobile)) {
				$("div[id='one']").html(
						"<font color='red'>不是完整的11位手机号或者正确的手机号前3位！</font>");
					checkMobile=false;
			} else {
				$.ajax({
					async : false,
					url : "ucenterRegiste!checkMemberMobile",
					type : "post",
					data : {
						"mobile" : mobile
					},
					datatype : "json",
					success : function(data) {
						var map = eval("(" + data + ")");
						if (map.temp == '手机号已注册') {
							$("div[id='one']")
									.html(
											"<font color='red'>" + map.temp
													+ "</font>");
								checkMobile=false;
						} else {
							$("div[id='one']").html(
									"<font color='green'>" + map.temp
											+ "</font>");
								checkMobile=true;
						}
					},
					error : function(request) {
						registeCheck1 = false;
						alert("系统异常，请稍后重试");
					}
				});
			}

		}

		// 聚焦密码框
		function txtFocus3(e) {
			if (e.value == '密码') {
				e.value = e.value.replace("密码", "");
				e.style.color = "";
				$("input[id='three1']").attr('type','password');
			}
			$("div[id='three1']").html("");
		}
		
		// 离开密码框
		function txtBlur3(e) {
			if(!e.value){
				$("input[id='three1']").attr('type','text');
				e.value = "密码";
				e.style.color = "#666666";
			}
			checkthree2();
		}
		
		// 聚焦确认密码框
		function txtFocus4(e) {
			if (e.value == '确认密码') {
				e.value = e.value.replace("确认密码", "");
				e.style.color = "";
				$("input[id='three2']").attr('type','password');
			}
		}
		
		//密码验证
		function checkthree2() {
			if ($("input[id='three2']").val() == '') {
				$("input[id='three2']").attr('type','text');
				$("input[id='three2']").val("确认密码")
				$("input[id='three2']").css("color", "#666666");
			}
			var p1 = $('#three1').val();
			var p2 = $('#three2').val();

			if (p1 != '' && p1 != '密码') {
				$("div[id='three1']").html("");
				if (p2 != '' && p2 != '确认密码') {
					$("div[id='three2']").html("");
					if (p1 != p2) {
						$("div[id='three2']")
								.html("<font color='red'>两次密码输入不一致</font>");
						checkPassword1=false;
					} else {
						$("div[id='three2']").html("");
						checkPassword1=true;
					}
				}else {
					$("div[id='three2']").html("<font color='red'>请输入确认密码</font>");
					checkPassword1=false;
				}
			}else {
				$("div[id='three1']").html("<font color='red'>请输入密码</font>");
				checkPassword1=false;
			}
		}
		
		function checkfive2() {
			if ($("input[id='five2']").val() == '') {
				$("input[id='five2']").attr('type','text');
				$("input[id='five2']").val("确认密码");
				$("input[id='five2']").css("color", "#666666");
			}
			var p3 = $('#five1').val();
			var p4 = $('#five2').val();
			if (p3 != '' && p3 != '密码') {
				$("div[id='five1']").html("");
				if (p4 != '' && p4 != '确认密码') {
					$("div[id='five2']").html("");
					if (p3 != p4) {
						$("div[id='five2']").html("<font color='red'>两次密码输入不一致</font>");
						checkPassword2=false;
					} else {
						$("div[id='five2']").html("");
						checkPassword2=true;
					}
				}else {
					$("div[id='five2']").html("<font color='red'>请输入确认密码</font>");
					checkPassword2=false;
				}
			}else {
				$("div[id='five1']").html("<font color='red'>请输入密码</font>");
				checkPassword2=false;
			}
		}
		
		//验证码
		function refresh(obj) {
			obj.src = "maccount!validateCode?" + Math.random();
		}

		$(document).ready(function() {
			$("input[id='six']").blur(function() {
				var fover = $("#six").val();
				if (fover.length == 0 || fover == "验证码") {
					$("input[id='six']").val("验证码");
					$("input[id='six']").css("color", "#666666");
				}else {
					$.ajax({
						async : false,
						url : "maccount!checkCode",
						type : "post",
						data : {
							"checkCode" : fover
						},
						datatype : "json",
						success : function(data) {
							var map = eval("(" + data + ")");
							if (map.temp == "success") {
								checkCode=true;
							} else {
								checkCode=false;
								alert("验证码有误！");

							}
						},
						error : function(request) {

							alert("Connection error");
						}
					});
				}
				
			});

		});
		
		// 聚焦邮箱
		function txtFocus5(e) {
			if (e.value == '邮箱') {
				e.value = e.value.replace("邮箱", "");
				e.style.color = "";
			}
			$("div[id='fover']").html("");
		}

		//邮箱验证

		function checkEmail() {
			var emial = $('#fover').val();
			emailReg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
			if (emial.length == 0) {
				$("div[id='fover']").html("<font color='red'>请输入邮箱</font>");
				$("input[id='fover']").val("邮箱");
				$("input[id='fover']").css("color","#666666");
				checkMail=false;
			} else if (!emailReg.test(emial)) {
				$("div[id='fover']").html("<font color='red'>邮箱地址输入有误</font>");
				checkMail=false;
			} else {
				$.ajax({
					async : false,
					url : "ucenterRegiste!checkMemberEmail",
					type : "post",
					data : {
						"email" : emial
					},
					datatype : "json",
					success : function(data) {
						var map = eval("(" + data + ")");
						if(map.temp=='邮箱可以注册'){
						$("div[id='fover']").html(
								"<font color='green'>" + map.temp + "</font>");
								checkMail=true;
						}else if (map.temp == '邮箱已注册') {
						alert(map.temp);
							checkMail=false;
						$("div[id='fover']").html(
								"<font color='red'>" + map.temp + "</font>");
								
						} 
					},
					error : function(request) {

						alert("Connection error");
					}
				});
			}
		}

		// 聚焦密码框2
		function txtFocus6(e) {
			if (e.value == '密码') {
				e.value = e.value.replace("密码", "");
				e.style.color = "";
				$("input[id='five1']").attr('type','password');
			}
			$("div[id='five1']").html("");
		}
		
		// 离开密码框2
		function txtBlur6(e) {
			if(!e.value){
				$("input[id='five1']").attr('type','text');
				e.value = "密码";
				e.style.color = "#666666";
			}
			checkfive2();
		}
		
		// 聚焦确认密码框2
		function txtFocus7(e) {
			if (e.value == '确认密码') {
				e.value = e.value.replace("确认密码", "");
				e.style.color = "";
				$("input[id='five2']").attr('type','password');
			}
		}
		
		// 聚焦验证码2
		function txtFocus8(e) {
			if (e.value == '验证码') {
				e.value = e.value.replace("验证码", "");
				e.style.color = "";
			}
		}
		
		function submit1() {
			var two = $("input[id='two']").val();
			if (two.length == 0) {
				checkMobileCode = false;
			}

			if (checkMobile&&checkMobileCode&&checkPassword1) {
				$("#three1").val(faultylabs.MD5($("#three1").val()));
				add.submit();
			} else {
				alert('请正确填写信息');
			}
		}

		function submit2() {
			var six = $("#six").val();
			if (six.length == 0) {
				checkCode = false;
				alert("请填写验证码");
			}
			if (checkMail&&checkPassword2&&checkCode) {
				$("#five1").val(faultylabs.MD5($("#five1").val()));
				form2.submit();
			} else {

				alert('请正确填写信息');
			}
		}
	</script>

	<script type="text/javascript">
		function check() {

			var register = document.getElementsByName("registe");
			for ( var i = 0; i < register.length; i++) {
				if (register[i].checked == true) {
					var registe1 = register[i].value;
					if (registe1 == '手机注册') {
						$("#form1").show();
						$("#form2").hide();

					}
					if (registe1 == '邮箱注册') {
						$("#form1").hide();
						$("#form2").show();

					}
				}
			}
		}
	</script>

</body>
</html>
